export default class Induce extends zrender.Group {
    constructor(node, text = "总结", color = "#ccc") {
        super();
        //所属的节点
        this.node = node;
        //总节文字
        this.induceText = text;
        //颜色
        this.color = color;
        //方向
        this.type = 'right';
        this.visible = true;
        //为node新增一个引用
        this.node.induce = this;
        this.createInduceShape();
        this.render();
        this.initEvent();
    }
    createInduceShape() {
        //两条贝塞尔曲线，一个Text
        this.bc1 = new zrender.BezierCurve({
            style: {
                stroke: this.color,
                lineWidth: 1
            },
            z: 9
        });
        this.bc2 = new zrender.BezierCurve({
            style: {
                stroke: this.color,
                lineWidth: 1
            },
            z: 9
        });
        this.text = new zrender.Text({
            style: {
                text: this.induceText,
                textPadding: [8, 10, 8, 10],
                textFill: '#666',
                transformText: true,
                fontSize: 12,
                textBorderRadius: 2,
                textBorderColor: this.color,
                textBorderWidth: 1,
                fontFamily: 'Microsoft YaHei',
            }
        });
        this.add(this.bc1);
        this.add(this.bc2);
        this.add(this.text);
    }
    render() {
        //判断方向
        this.adjustType();
        //获取Node以及其子孙节点所有总结并排序
        var induces = this.getInduces();
        //获取Node以及子孙节点所占的范围
        var box = this.getBox(this.node.getNodeList());
        //获取induces所占的范围
        if (induces.length) {
            var induceBox = this.getBox(induces);
        }
        //设置坐标
        this.renderInduce(box, induceBox);
    }
    adjustType() {
        var rootPos = this.node.getMinder().getRoot().getPosition();
        var nodePos = this.node.getPosition();
        if (rootPos.x > nodePos.x) {
            this.type = 'left';
        }
        else {
            this.type = 'right';
        }
    }
    getInduces() {
        var induces = [];
        this.node.getMinder().traverseBF((n) => {
            if (n != this.node) {
                if (n.induce && !n.induce.ignore) {
                    induces.push(n.induce);
                }
            }
        }, this.node);
        return induces.sort((a, b) => {
            return b.node.getLevel() - a.node.getLevel();
        });
    }
    getBox(items) {
        var x0 = 0, y0 = 0, x1 = 0, y1 = 0;
        items.forEach((n, i) => {
            var pos = n.getPosition();
            var box = n.getBoundingRect();
            if (n.ignore) {
                return;
            }
            if (i == 0) {
                x0 = pos.x;
                y0 = pos.y;
                x1 = pos.x + box.width;
                y1 = pos.y + box.height;
            }
            else {
                if (!n.visible) {
                    return;
                }
                if (pos.x < x0) {
                    x0 = pos.x;
                }
                if (pos.y < y0) {
                    y0 = pos.y;
                }
                if ((pos.x + box.width) > x1) {
                    x1 = pos.x + box.width;
                }
                if ((pos.y + box.height) > y1) {
                    y1 = pos.y + box.height;
                }
            }
        });
        return {
            x0: x0,
            y0: y0,
            x1: x1,
            y1: y1,
            width: x1 - x0,
            height: y1 - y0
        };
    }
    renderInduce(box, induceBox) {
        if (this.type == 'right') {
            var max = induceBox ? Math.max(box.x1, induceBox.x1) : box.x1;
            this.setPosition(max + 5, box.y0);
            this.bc1.attr({
                shape: {
                    x1: 2,
                    y1: 0,
                    x2: 10,
                    y2: box.height / 2,
                    cpx1: 10,
                    cpy1: 10,
                    cpx2: 2,
                    cpy2: box.height / 2 - 10
                }
            });
            this.bc2.attr({
                shape: {
                    x1: 10,
                    y1: box.height / 2,
                    x2: 2,
                    y2: box.height,
                    cpx1: 2,
                    cpy1: box.height / 2 + 10,
                    cpx2: 10,
                    cpy2: box.height - 10
                }
            });
            var textBox = this.text.getBoundingRect();
            this.text.attr({
                position: [16, (box.height - textBox.height) / 2]
            });
        }
        else if (this.type == 'left') {
            var min = induceBox ? Math.min(box.x0, induceBox.x0) : box.x0;
            var textBox = this.text.getBoundingRect();
            this.setPosition(min - textBox.width - 30, box.y0);
            this.bc1.attr({
                shape: {
                    x1: textBox.width + 14,
                    y1: 0,
                    x2: textBox.width + 4,
                    y2: box.height / 2,
                    cpx1: textBox.width + 4,
                    cpy1: 10,
                    cpx2: textBox.width + 14,
                    cpy2: box.height / 2 - 10
                }
            });
            this.bc2.attr({
                shape: {
                    x1: textBox.width + 4,
                    y1: box.height / 2,
                    x2: textBox.width + 14,
                    y2: box.height,
                    cpx1: textBox.width + 14,
                    cpy1: box.height / 2 + 10,
                    cpx2: textBox.width + 4,
                    cpy2: box.height - 10
                }
            });
            this.text.attr({
                position: [0, (box.height - textBox.height) / 2]
            });
        }
    }
    getPosition() {
        return {
            x: this.position[0],
            y: this.position[1]
        };
    }
    //设置位置
    setPosition(x, y) {
        this.attr({
            position: [x, y]
        });
    }
    //设置文字
    setText(text) {
        this.induceText = text;
        this.text.attr({
            style: {
                text: text
            }
        });
    }
    getText() {
        return this.induceText;
    }
    getTextBox() {
        return this.text.getBoundingRect();
    }
    refresh() {
        this.render();
    }
    //  show(){
    //      this.visible=true;
    //      this.show();
    //  }
    //  hide(){
    //      this.visible=false;
    //      this.hide();
    //  }
    initEvent() {
        this.on('dblclick', () => {
            this.__zr.trigger('editInduce', { induce: this });
        }).on('mouseover', () => {
            this.text.setStyle('textBorderColor', 'rgb(247,186,134)');
        }).on('mouseout', () => {
            this.text.setStyle('textBorderColor', this.color);
        }).on('click', (e) => {
            e.induce = this;
            this.__zr.trigger('touchInduce', e);
        });
    }
    getData() {
        return {
            node: this.node.getId(),
            text: this.induceText,
            color: this.color
        };
    }
}
